<template>
    <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>数据审核</el-breadcrumb-item>
      <el-breadcrumb-item>数据审核</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区 -->
    <el-card>
      <!-- 施工主管 进度表-->
      <div class="proSup" v-if="arr.indexOf('proSup') > -1">
        <el-row>
          <el-col :span="17"><span class="title">施工主管-进度表</span></el-col>
          <el-col :span="7">
            <el-input placeholder="请输入名称" v-model="proQuery.query" @keyup.enter="getProcess()" clearable @clear="getProcess()">
              <template #append>
                <el-button icon="el-icon-search" @click="getProcess()"></el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="process" border stripe style="margin-bottom:15px">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="关联项目" prop="itemName"></el-table-column>          
          <el-table-column label="上报时间" prop="createTime"></el-table-column>
          <el-table-column label="上报员" prop="reportId"></el-table-column>
          <el-table-column label="操作" min-width="150">
            <template v-slot="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="acceptPro(scope.row)" >通过</el-button>
              <el-button type="danger" icon="el-icon-edit" size="mini" @click="rejectPro(scope.row)">不通过</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-config-provider :locale="locale">
          <el-pagination
            @size-change="proSizeChange"
            @current-change="proCurChange"
            :current-page="proQuery.pagenum"
            :page-sizes="[5,10,20]"
            :page-size="proQuery.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="proTotal"
          ></el-pagination>
        </el-config-provider>
        <el-dialog title="数据审核" v-model="rejProDiaVisible" width="50%" @close="rejProDiaClosed">
          <el-form ref="rejProForm" :model="curPro" label-width="80px" width="100%">
            <el-form-item label="驳回原因" prop="reason">
              <el-input type="text" v-model="curPro.reason"></el-input>
            </el-form-item>
          </el-form>
          <!-- 底部 -->
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="rejProDiaVisible = false">取消</el-button>
              <el-button type="primary" @click="rejPro">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </div>

      <!-- 实验主管 试验检测 -->
      <div class="expSup" v-if="arr.indexOf('expSup') > -1">
        <el-row>
          <el-col :span="17"><span class="title">实验主管-试验检测表</span></el-col>
          <el-col :span="7">
            <el-input placeholder="请输入试验名称" v-model="expQuery.query" @keyup.enter="getExperiment()" clearable @clear="getExperiment()">
              <template #append>
                <el-button icon="el-icon-search" @click="getExperiment()"></el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="experiment" border stripe style="margin-bottom:15px">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="试验名称" prop="experimentContentName"></el-table-column>
          <el-table-column label="关联项目" prop="itemName">
            <template v-slot="scope"><span>{{scope.row.itemName?scope.row.itemName:'无'}}</span></template>
          </el-table-column>
          <el-table-column label="上报时间" prop="createTime"></el-table-column>
          <el-table-column label="清单量" prop="inventoryQuantity"></el-table-column>
          <el-table-column label="公式" prop="formula"></el-table-column>
          <el-table-column label="应作量" prop="requiredQuantity"></el-table-column>
          <el-table-column label="上报量" prop="reportedQuantity"></el-table-column>
          <el-table-column label="上报员" prop="reportId"></el-table-column>
          <el-table-column label="操作" min-width="150">
            <template v-slot="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="acceptExp(scope.row)" >通过</el-button>
              <el-button type="danger" icon="el-icon-edit" size="mini" @click="rejectExp(scope.row)">不通过</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-config-provider :locale="locale">
          <el-pagination
            @size-change="expSizeChange"
            @current-change="expCurChange"
            :current-page="expQuery.pagenum"
            :page-sizes="[5,10,20]"
            :page-size="expQuery.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="expTotal"
          ></el-pagination>
        </el-config-provider>
        <el-dialog title="数据审核" v-model="rejExpDiaVisible" width="50%" @close="rejExpDiaClosed">
          <el-form ref="rejExpForm" :model="curExp" label-width="80px" width="100%">
            <el-form-item label="驳回原因" prop="reason">
              <el-input type="text" v-model="curExp.reason"></el-input>
            </el-form-item>
          </el-form>
          <!-- 底部 -->
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="rejExpDiaVisible = false">取消</el-button>
              <el-button type="primary" @click="rejExp">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </div>

      <!-- 资料主管 资料 -->
      <div class="docSup" v-if="arr.indexOf('docSup') > -1">
        <el-row>
          <el-col :span="17"><span class="title">资料主管-资料表</span></el-col>
          <el-col :span="7">
            <el-input placeholder="请输入资料名称" v-model="docQuery.query" @keyup.enter="getDocument()" clearable @clear="getDocument()">
              <template #append>
                <el-button icon="el-icon-search" @click="getDocument()"></el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="document" border stripe style="margin-bottom:15px">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="册数" prop="volume"></el-table-column>
          <el-table-column label="文件材料名称" prop="documentContentName"></el-table-column>
          <el-table-column label="编制完成" prop="isOrganization">
            <template v-slot="scope"><span>{{scope.row.isOrganization?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="监理已签认" prop="isSupervisor">
            <template v-slot="scope"><span>{{scope.row.isSupervisor?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="设计已签认" prop="isDesign">
            <template v-slot="scope"><span>{{scope.row.isDesign?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="建设单位已签认" prop="isConstruction">
            <template v-slot="scope"><span>{{scope.row.isConstruction?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="已移交档案馆" prop="isArchives">
            <template v-slot="scope"><span>{{scope.row.isArchives?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="上报时间" prop="createTime"></el-table-column>
          <el-table-column label="上报员" prop="reportUserId"></el-table-column>
          <el-table-column label="操作" min-width="150">
          <template v-slot="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="acceptDoc(scope.row)" >通过</el-button>
            <el-button type="danger" icon="el-icon-edit" size="mini" @click="rejectDoc(scope.row)" >不通过</el-button>
          </template>
        </el-table-column>
        </el-table>
        <el-config-provider :locale="locale">
          <el-pagination
            @size-change="docSizeChange"
            @current-change="docCurChange"
            :current-page="docQuery.pagenum"
            :page-sizes="[5,10,20]"
            :page-size="docQuery.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="docTotal"
          ></el-pagination>
        </el-config-provider>
        <el-dialog title="数据审核" v-model="rejDocDiaVisible" width="50%" @close="rejDocDiaClosed">
          <el-form ref="rejDocForm" :model="curDoc" label-width="80px" width="100%">
            <el-form-item label="驳回原因" prop="reason">
              <el-input type="text" v-model="curDoc.reason"></el-input>
            </el-form-item>
          </el-form>
          <!-- 底部 -->
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="rejDocDiaVisible = false">取消</el-button>
              <el-button type="primary" @click="rejDoc">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </div>

    </el-card>
    </div>
</template>
<script>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
export default {
    data(){
      return{
        arr:['docSup','expSup','proSup'],
        experiment: [],
        document:[],
        process:[],
        
        proQuery:{
          query:"",
          pagenum:1,
          pagesize:5
        },
        proTotal:0,

        expQuery:{
          query:"",
          pagenum:1,
          pagesize:5
        },
        expTotal:0,

        docQuery:{
          query:"",
          pagenum:1,
          pagesize:5
        },
        docTotal:0,

        rejExpDiaVisible:false,
        rejDocDiaVisible:false,
        rejProDiaVisible:false,
        curExp:{},
        curDoc:{},
        curPro:{},
      }
    },
    setup() {
      return {
        locale: zhCn
      };
    },
    mounted(){
      if(this.arr.indexOf('docSup') > -1){ this.getDocument(); }
      if(this.arr.indexOf('expSup') > -1){ this.getExperiment(); }
      if(this.arr.indexOf('proSup') > -1){ this.getProcess(); }
    },
    computed:{
      DateFormat(){
        return function(date){
          return dateFormatFun(date,2);
        };
      }
    },
    methods:{
      async getProcess(){
        // todo
        // this.process = res.data
      },
      async getExperiment(){
          const { data: res } = await this.$http.get("experimentSupervisor/getReviewExperiment",{
            params:this.expQuery
          });
          console.log(res);
          if (res.code !== 200) return this.$message.error(res.msg);
          this.experiment = res.data.list;
          this.expTotal = res.data.total;
          // if(this.expTotal != 0){
          //   this.$message.info("您有试验数据待审核")
          // }
      },
      async getDocument() {
        const { data: res } = await this.$http.get("documentSupervisor/getReviewDocument",{
          params: this.docQuery
        });
        console.log(res);
        if (res.code !== 200) return this.$message.error(res.msg);
        this.document = res.data.list;
        this.docTotal = res.data.total;
      },
      expSizeChange(newSize) {
        this.expQuery.pagesize = newSize;
        this.getExperiment();
      },
      expCurChange(newPage) {
        this.expQuery.pagenum = newPage;
        this.getExperiment();
      },
      docSizeChange(newSize) {
        this.docQuery.pagesize = newSize;
        this.getDocument();
      },
      docCurChange(newPage) {
        this.docQuery.pagenum = newPage;
        this.getDocument();
      },
      proSizeChange(newSize) {
        this.proQuery.pagesize = newSize;
        this.getProcess();
      },
      proCurChange(newPage) {
        this.proQuery.pagenum = newPage;
        this.getProcess();
      },
      async acceptExp(experiment){
        const confirmRes = await this.$confirm("确认通过该条数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(err => console.log(err));
        if (confirmRes !== "confirm") {
          return this.$message.info("取消通过");
        }
        console.log(experiment);
        // 通过请求只需 传参id
        let formData = new FormData();
        formData.append("id",experiment.id)
        const { data: res } = await this.$http.post("experimentSupervisor/acceptExperiment",formData);
        console.log(res);
        if (res.code !== 200) return this.$message.error(res.msg);
        this.getExperiment()
      },
      rejectExp(experiment){
        // 弹出对话框，填写拒绝原因
        this.curExp = experiment;
        this.rejExpDiaVisible = true;
      },
      rejExpDiaClosed(){ this.$refs.rejExpForm.resetFields()},
      async rejExp(){
        let formData = new FormData();
        formData.append('id',this.curExp.id);
        formData.append('reason',this.curExp.reason);
        console.log(formData)
        const { data: res } = await this.$http.post('experimentSupervisor/rejectExperiment',formData)
        console.log(res);
        if (res.code !== 200) return this.$message.error(res.msg);
        this.rejExpDiaVisible = false 
        // 重新获取experiment
        this.getExperiment()
      },

      async acceptDoc(document){
        const confirmRes = await this.$confirm("确认通过该条数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(err => console.log(err));
        if (confirmRes !== "confirm") {
          return this.$message.info("取消通过");
        }
        let formData = new FormData();
        formData.append("id",document.id)
        const { data: res } = await this.$http.post("documentSupervisor/acceptDocument",formData);
        console.log(res);
        if (res.code !== 200) return this.$message.error(res.msg);
        this.getDocument()
      },
      rejectDoc(document){
        this.curDoc = document;
        this.rejDocDiaVisible = true;
      },
      rejDocDiaClosed(){ this.$refs.rejDocForm.resetFields()},
      async rejDoc(){
        let formData = new FormData();
        formData.append('id',this.curDoc.id);
        formData.append('reason',this.curDoc.reason);
        console.log(formData)
        const { data: res } = await this.$http.post('documentSupervisor/rejectDocument',formData)
        console.log(res);
        if (res.code !== 200) return this.$message.error(res.msg);
        this.rejDocDiaVisible = false 
        this.getDocument()
      },

      async acceptPro(process){
        const confirmRes = await this.$confirm("确认通过该条数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(err => console.log(err));
        if (confirmRes !== "confirm") {
          return this.$message.info("取消通过");
        }
        let formData = new FormData();
        formData.append("id",process.id)
        const { data: res } = await this.$http.post("",formData);     //-------------
        console.log(res);
        if (res.code !== 200) return this.$message.error(res.msg);
        this.getProcess()
      },
      rejectPro(process){
        this.curPro = process;
        this.rejProDiaVisible = true;
      },
      rejProDiaClosed(){ this.$refs.rejProForm.resetFields()},
      async rejPro(){
        let formData = new FormData();
        formData.append('id',this.curPro.id);
        formData.append('reason',this.curPro.reason);
        console.log(formData)
        const { data: res } = await this.$http.post('',formData)          //------------
        console.log(res);
        if (res.code !== 200) return this.$message.error(res.msg);
        this.rejProDiaVisible = false 
        this.getProcess()
      },

    }    
}
</script>

<style lang="less" scoped>
.title{
    font-size: 14px;
    color:#666;
    display: block;
    padding:10px 0 0 2px;
  }
</style>